<template>
	<view class="home">
		<view class="search_box" >
			<my-search @gotSearch='gotSearch'></my-search>
		</view>
		<swiper class="swiper_box" :indicator-dots="true" :autoplay="true" :interval="3000" :duration="1000" circular>
			<swiper-item v-for="(swiper,index) in swiperList" :key="swiper.goods_id">
				<view class="swiper-item">
					<image class="img" :src="swiper.image_src" mode="" @tap="imgeclick(swiper.goods_id)"></image>
				</view>
			</swiper-item>
		</swiper>
		<!-- 分类导航 -->
		<view class="nav_list">
			<view class="nav_item" v-for="(catitems,index) in catitemsLsit" :key="index">
				<image :src="catitems.image_src" mode="" @tap="navclick(catitems)"></image>
			</view>
		</view>
		<!-- 楼层 -->
		<view class="foolr_list" v-for="(foolr,index) in floorList" :key='index'>
			<view class="foolr_text">
				<image :src="foolr.floor_title.image_src" mode=""></image>
			</view>
			<view class="foolr_box">
				<navigator class="foolr_left" :url="foolr.product_list[0].url">
					<image :src="foolr.product_list[0].image_src" mode="widthFix" :style="{width:foolr.product_list[0].image_width+'rpx'}"></image>
				</navigator>
				<view class="foolr_right">
					<navigator class="riimg" v-for="(foolrtow,index) in foolr.product_list" :key="index" v-if="index!==0" :url="foolrtow.url">
						<image :src="foolrtow.image_src" mode="widthFix" :style="{width:foolrtow.image_width+'rpx'}"></image>
					</navigator>
				</view>
			</view>
		</view>
	</view>
</template>

<script>
	import badgeMix from '@/mixins/tabbar-badge.js'
	export default {
			mixins:[badgeMix],
		data() {
			return {
				swiperList:[],
				catitemsLsit:[],
				floorList:[]
			}
		},
		methods: {
			getSwiper(){
				this.request({
					url:'/public/v1/home/swiperdata'
				}).then((res)=>{
					// console.log(res)
					this.swiperList=res.data.message
				})
			},
			//点击轮播图，进入详情
			imgeclick(id){
				uni.navigateTo({
					url:`/subpkg/goods_detail/goods_detail?goods_id=${id}`,
					
				})
			},
			// 获取分类导航数据
			getCatitems(){
				this.request({
					url:'/public/v1/home/catitems'
				}).then(({data:res})=>{
					// console.log(res)
					this.catitemsLsit=res.message
				})
			},
			// 点击分类导航
			navclick(item){
				if(item.name==="分类"){
					uni.switchTab({
						url:"/pages/cate/cate"
					})
				}
			},
			getFoolrList(){
				this.request({
					url:'/public/v1/home/floordata'
				}).then(({data:res})=>{
					// console.log(res)
					// 对数据进行处理、
					res.message.forEach(foolr=>{
						foolr.product_list.forEach(prod=>{
							prod.url=`/subpkg/goods_list/goods_list?${prod.navigator_url.split('?')[1]}`
						})
					})
					this.floorList=res.message
					console.log(this.floorList)
				})
			},
			// 自定义事件，搜索
			gotSearch(){
				uni.navigateTo({
					url:'/subpkg/search/search'
				})
			}
		},
		onLoad() {
			this.getSwiper()
			this.getCatitems()
			this.getFoolrList()
		}
	}
</script>

<style lang="scss">
.home{
	.swiper_box{
		height: 330rpx;
		.img{
			width: 100%;
			
		}
	}
}
.nav_list{
		display: flex;
		justify-content: space-between;
		margin: 15px 0;
		.nav_item{
			image{
				width: 128rpx;
				height: 140rpx;
			}
		}
	}
	.foolr_text{
		height: 60rpx;
		image{
			width: 100%;
			height: 100%;
		}
	}
	.digImg{
		width: 100%;
	}
	.foolr_right{
		display: flex;
		flex-wrap: wrap;
		justify-content: space-around;
	}
	.foolr_box{
		display: flex;
		padding-left: 10rpx;
	}
	.search_box{
		position: sticky;
		top: 0;
		left: 0;
		z-index: 999;
	}
</style>
